<template>
  <!--布局样式-->
  <div class="game">
    <!--爪子-->
    <div class="paw">
      <div class="pawer"></div>
      <div class="pawerPic">
        <img src="" class="lose" />
        <div class="win" v-if="gzShow2">
          <img :src="t_img" />
        </div>
      </div>
    </div>
    <!--区域-->
    <div class="area">
      <!--娃娃滚动-->
      <div id="pack" ref="pack">
        <div id="sel1" class="father" ref="imgs">
          <img
            v-for="img in imgs"
            :class="img.isSuc ? 'yes' : 'no'"
            :src="img.img"
            :key="img.id"
            :alt="img.isSuc"
          />
        </div>
      </div>
    </div>
    <span class="button" @click="zhua"></span>
  </div>
</template>


<script>
export default {
  data() {
    return {};
  },
  mounted() {
    this.wawa();
    this.talon = $(".pawerPic").offset().left + 100; // 首先获取爪子的位置(这里是固定的)
  },
  methods:{
    wawa() {
      var pack = this.$refs.pack,
        width = $("#pack").width(),
        imgsWidth = (this.imgs.length * width) / 3,
        initLeft = 0;

      this.chatTimer = setInterval(function () {
        initLeft++;

        if (imgsWidth - initLeft < width + 60) {
          initLeft = 0;
        }
        $("#sel1").css({
          width: imgsWidth,
          transform: "translateX(-" + initLeft + "px)",
        });
      }, 15);
    },
    zhua() {
      let that = this;
      that.t_img = "";
      that.gzShow2 = false;
      var long = $(".game").height() - 230; //爪子伸长的距离

      $(".pawer").animate(
        {
          height: long,
        },
        1000
      ); //伸下去(绳子)
      $(".pawerPic").animate(
        {
          top: long + 10,
        },
        1000
      ); //伸下去(爪子)

      setTimeout(function () {
        that.ok_no();
      }, 1000); /* 判断抓没抓到娃娃 */

      $(".pawer").animate(
        {
          height: 10,
        },
        1000
      ); //伸上去(绳子)
      $(".pawerPic").animate(
        {
          top: 20,
        },
        1000
      ); //伸上去(爪子)
    },
    ok_no() {
      let that = this;
      /* 打印出此时此刻每个娃娃的位置 */
      let width = $("#sel1 img").width();
      console.log(width);
      for (let i = 0; i < $("#sel1 img").length; i++) {
        let l = $("#sel1 img").eq(i).offset().left + width / 2; // 此时此刻每个娃娃的位置

        if (l - 15 <= that.talon && that.talon <= l + 15) {
          // 这里的15是用来控制爪子的位置到卡片的哪些区域算抓到，可自行修改
          that.gzShow2 = true;

          that.t_img = $("#pack img")
            .eq(i - 1)
            .attr("src");
          let isSuc = $("#pack img")
            .eq(i - 1)
            .attr("alt");

          if (isSuc !== undefined) {
            switch (isSuc) {
              case "1":
                that.isE = false;
                break;
              case "2":
                that.isS = false;
                break;
              case "3":
                that.isI = false;
                break;
              case "4":
                that.isM = false;
                break;
              default:
                break;
            }
            that.isSuc.push(parseInt(isSuc));
          }
          let ok = that.isContained(that.isSuc, that.success);

          if (ok == true) {
            console.log("成功");
          } else {
            console.log("狗屎都没抓到");
          }
        }
      }
    },
    // 判断抓到的数组是否中奖
    isContained(a, b) {
      if (!(a instanceof Array) || !(b instanceof Array)) return false;
      if (a.length < b.length) return false;
      var aStr = a.toString();
      for (var i = 0, len = b.length; i < len; i++) {
        if (aStr.indexOf(b[i]) == -1) return false;
      }
      return true;
    },
  }
};
</script>


<style scoped>
    .game {
        width: 80%;
        height: 730px;
        background: url() no-repeat;
        background-size: 100%;
        animation: bg infinite 0.6s;
        position: relative;
        top: -60px;
        left: 0;
        z-index: 2;
    }
    .paw {
        position: relative;
        top: 10%;
    }
    .pawer {
        width: 20px;
        background: rgb(170, 219, 254);
        height: 10px;
        position: absolute;
        top: 20px;
        left: 51%;
        margin-left: -15px;
        border-left: 1px solid rgba(42, 59, 156, 0.7);
        border-right: 1px solid rgba(42, 59, 156, 0.7);
    }
    .pawerPic {
        width: 95px;
        height:85px;
        position: absolute;
        top: 30px;
        left: 51%;
        margin-left: -55px;
    }
    .img {
      width: 100%;
    }
    .win {
      position: absolute;
      bottom: -60px;
    }
    .area {
        width: 100%;
        height: 500px;
        overflow:hidden;
        position: absolute;
        top:40px;
        left: 0;
        bottom: 40px;
    }
    /*娃娃滚动*/
    #pack {
        width: 80%;
        white-space: nowrap;
        overflow: hidden;
        position: absolute;
        bottom: 60px;
        left: 10%;
        }
    #sel1 {
      display: block;
    }
    img {
        display: block;
        width: 130px;
        height: 150px;
        float: left;
        margin-left: 20px;
    }
    .button {
        display: block;
        width: 130px;
        height: 90px;
        background: url() no-repeat;
        background-size: 100%;
        position: absolute;
        bottom: 20px;
        left: 40%;
    }

</style>
